<template>
  <div>
    <div>
      <el-input style="width: 200px" placeholder="查询模块" v-model="operation"></el-input>
      <el-button type="primary" style="margin-left:10px" @click="load(1)">查询</el-button>
      <el-button type="info" @click="reset">重置</el-button>
    </div>

    <div style="margin: 10px 0">
      <el-button type="danger" plain @click="delBatch">批量删除</el-button>
    </div>

    <el-table :data="tableData" stripe :header-cell-style="{background:'#df6e2c',color:'white'}"  @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column prop="id" label="序号" align="center" width="70"></el-table-column>
      <el-table-column prop="operation" label="操作模块" align="center"></el-table-column>
      <el-table-column prop="type" label="操作类型" align="center">

      </el-table-column>
      <el-table-column prop="ip" label="操作人IP" align="center"></el-table-column>
      <el-table-column prop="time" label="操作时间" align="center"></el-table-column>
      <el-table-column prop="user" label="操作人" align="center"></el-table-column>
      <el-table-column label="操作" align="center" width="180">
        <template v-slot="scope">
          <el-button type="danger" size="mini" plain @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="margin: 10px 0">
      <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "Logs",
  data(){
    return {
      tableData:[],
      pageNum:1,
      pageSize:5,
      operation:'',
      total:0,
      form:{},
      user:JSON.parse(localStorage.getItem("user") || '{}'),
      ids:[]
    }
  },
  created() {
    this.load()
  },
  methods:{
    delBatch(){
      if (!this.ids.length){
        this.$message.warning("请选择数据")
        return
      }
      this.$confirm("您确认删除这些数据吗","确认删除",{type:'warning'}).then(response=>{
            this.$request.delete("/logs/delete/bacth",{data:this.ids}).then(res=>{
              if (res.code==="200"){
                this.$message.success("删除成功")
                this.load(1)
              }else {
                this.$message.error(res.msg)
              }
            })
          }).catch(()=>{})
    },
    handleSelectionChange(rows){
      this.ids = rows.map(v=>v.id)
    },
    del(id){
      this.$confirm("您确认删除吗","确认删除",{type:"warning"}).then(respone=>{
        this.$request.delete("/logs/delete/"+id).then(res=>{
          if (res.code==="200"){
            this.$message.success("删除成功")
            this.load(1)
          }else {
            this.$message.error(res.msg)
          }
        })
      }).catch(()=>{})
    },
    reset(){
      this.operator=''
      this.load()
    },
    load(pageNum){ //分布查询
      if (pageNum) this.pageNum=pageNum
      this.$request.get("/logs/selectByPage",{
        params:{
          pageNum:this.pageNum,
          pageSize:this.pageSize,
          operation:this.operation
        }
      }).then(res=>{
        this.tableData=res.data.records
        this.total=res.data.total
      })
    },
    handleCurrentChange(pageNum){
      this.load(pageNum)
    }
  }
}
</script>

<style scoped>
.el-tooltip__popper{max-width: 300px !important;}
</style>